<%-- 
    Document   : sample3
    Created on : 2009-7-11, 18:04:55
    Author     : think
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <script src="prototype.js" type="text/javascript"></script>
    <script src="scriptaculous.js" type="text/javascript"></script>
    <head>
        <style type="text/css">
            a#move_demo { background:#fa0000; color:#fff; padding:5px; border:1px solid #000; }
        </style>
    </head>
    <body>
        <div class="demo">
            <a href="#" id="move_demo" onclick="new Effect.Move(this, { x: 60, y: 30 }); return
                false;">Click me for a demo!</a>
        </div>

        <div id="grow_demo" style="display:none; width:80px; height:80px; background:#ccc;"></div>
        <ul>
            <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
            <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
        </ul>
        <div id="switchoff_demo" style="width:80px; height:80px; background:#ccc;"></div>
        <ul>
            <li><a href="#" onclick="Effect.SwitchOff('switchoff_demo'); return false;">Click here for a demo!</a></li>
            <li><a href="#" onclick="$('switchoff_demo').show(); return false;">Reset</a></li>
        </ul>
    </body>
</html>
